// DraggableResizableWidget.tsx
import React, { useRef } from 'react';
import Resizable from 'react-resizable';
import 'react-resizable/css/styles.css'; // 必须导入样式
import type { GridWidget, GridConfig } from '../types/prevViewTypes';

import * as echarts from 'echarts';
import BigNumber from 'bignumber.js';
import CommonChart from './chartComponents/CommomChart';

interface Props {
  widget: GridWidget;
  gridConfig: GridConfig;
  onUpdate: (widget: GridWidget) => void;
}

// 定义数据项类型接口
interface EchartDataItem {
  xTime: string;
  yValue: string; // 原始数据为字符串类型的数值
}
const useOption = () => {
  // 明确返回函数的参数和返回值类型
  return (data: EchartDataItem[]): echarts.EChartsOption => ({
    color: ['#ffffff'],
    title: {
      text: '图表y轴时间',
      textAlign: 'left',
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
        fontWeight: 'lighter',
        fontFamily: 'Lato',
      },
    },
    grid: {
      left: '2%',
      right: '3%',
      top: '15%',
      bottom: '2%',
      containLabel: true,
    },
    xAxis: [
      {
        axisLine: {
          lineStyle: {
            color: '#ffffff',
            width: 1,
          },
        },
        data: data.map((item) => item.xTime),
        axisLabel: {
          formatter: (value: string) => value,
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        position: 'left',
        type: 'value',
        scale: true,
        axisLine: {
          lineStyle: {
            color: '#ffffff',
            width: 1,
          },
        },
        splitLine: {
          lineStyle: {
            color: '#ffffff',
            width: 0.5,
            opacity: 0.2,
          },
        },
        axisLabel: {
          formatter: (value: number) => new BigNumber(value).toString(),
        },
        boundaryGap: ['5%', '2%'],
      },
      {
        position: 'right',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#ffffff',
            width: 1,
          },
        },
      },
    ],
    series: [
      {
        name: '测试图表',
        type: 'line',
        yAxisIndex: 0,
        lineStyle: {
          color: '#ffffff',
          width: 1,
        },
        symbol: 'none',
        data: data.map((item) => new BigNumber(item.yValue).toNumber()),
      },
    ],
  });
};

// 明确图表数据类型
const echartData: EchartDataItem[] = [
  { xTime: '2020-01-01', yValue: '1500' },
  { xTime: '2020-01-02', yValue: '5220' },
  { xTime: '2020-01-03', yValue: '4000' },
  { xTime: '2020-01-04', yValue: '3500' },
  { xTime: '2020-01-05', yValue: '7800' },
];

const DraggableResizableWidget: React.FC<Props> = ({ widget, gridConfig, onUpdate }) => {
  const draggableRef = useRef<HTMLDivElement>(null);
  const parseOption = useOption();

  const handleResize = (e: React.SyntheticEvent, { size }: { size: { width: number; height: number } }) => {
    const snappedWidth = Math.round(size.width / gridConfig.cellSize) * gridConfig.cellSize;
    const snappedHeight = Math.round(size.height / gridConfig.cellSize) * gridConfig.cellSize;
    onUpdate({ ...widget, width: snappedWidth, height: snappedHeight });
  };

  const handleRotate = () => {
    const newRotation = (widget.rotation + 90) % 360;
    onUpdate({ ...widget, rotation: newRotation });
  };

  return (
    <div
      ref={draggableRef}
      style={{
        position: 'relative',
        width: widget.width,
        height: widget.height,
      }}
    >
      {/* <Resizable
        width={widget.width}
        height={widget.height}
        minConstraints={[gridConfig.cellSize * 2, gridConfig.cellSize * 2]}
        maxConstraints={[gridConfig.cellSize * 10, gridConfig.cellSize * 10]}
        onResize={handleResize}
        handles={['se', 'sw', 'ne', 'nw', 'e', 'w', 'n', 's']}
      > */}
      <div
        style={{
          padding: 16,
          border: '1px solid #2962ff',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderRadius: 4,
          transform: `rotate(${widget.rotation}deg)`,
          transformOrigin: 'center',
          position: 'relative',
          zIndex: widget.zIndex,
        }}
      >
        {/* 组件内容 */}
        <h3>{widget.name}</h3>
        <p>类型：{widget.type}</p>
        <CommonChart
          option={parseOption(echartData)}
          notMerge
          lazyUpdate
          style={{ height: 180, width: 500, backgroundColor: '#6d5858ff' }}
        />
        {/* 旋转控制按钮 */}
        <button
          onClick={handleRotate}
          style={{
            position: 'absolute',
            top: 8,
            right: 8,
            padding: 4,
            backgroundColor: '#2962ff',
            color: 'white',
            border: 'none',
            borderRadius: 4,
            cursor: 'pointer',
          }}
        >
          旋转
        </button>
      </div>
      {/* </Resizable> */}
    </div>
  );
};

export default DraggableResizableWidget;
